<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body></body>
  <script>
    function squareSum(a, b) {
      function square(x) {
        return x * x;
      }
      return square(a) + square(b);
    }
    console.log(squareSum(2, 3)); // 13

    function person() {
      let name = "ls";

      function getName() {
        return name;
      }
      return getName;
    }
    let getName = person();
    console.log(getName); //
    console.log(getName()); //ls

    console.clear();

    var num1 = 10;
    (function () {
      var num1 = 20;
      console.log(num1); //  20
    })();
    console.log(num1); // 10
    console.clear();

    function req(cb) {
      console.log("请求数据");
      cb("success");
      console.log("请求结束");
    }

    function callback(res) {
      console.log(`执行回调 ${res} `); //执行回调 success
    }
    req(callback);

    req((res) => {
      console.log(`执行回调 ${res} `); //执行回调 success
    });
    // 请求数据
    // 执行回调 success
    // 请求结束

    console.clear();

    var arr = [1, 2, 34, 5, 7, 98];
    // for 循坏输出
    for (let i = 0; i < arr.length; i++) {
      console.log(arr[i]);
    }
    //  for...of
    for (let ele of arr) {
      console.log(ele); //访问到的元素
    }
    // forEach
    arr.forEach((ele, index, self) => {
      console.log(ele, index, self); //访问到的元素，当前索引，数组本身
    });
    // arr.splice(2, 1);
    // console.log(arr); //[1,2,5,7,98]

    console.clear();

    // 栈
    var stack = [1, 2, 3, 4];
    stack.push(5);
    console.log(stack); // [1, 2, 3, 4, 5]

    stack.pop();
    console.log(stack); // [1, 2, 3, 4]
    // 队列
    var queue = [1, 2, 3];
    queue.push(4, 5, 6);
    console.log(queue); // [1, 2, 3, 4, 5, 6]

    var first = queue.shift(); //移除
    console.log(first); // 1
    console.log(queue); //  [2, 3, 4, 5, 6]

    queue.unshift(10, 11, 12);
    console.log(queue); // [10, 11, 12, 2, 3, 4, 5, 6]

    console.clear();
    var arr = [1, 2, 3];
    console.log(arr.reverse()); // [3, 2, 1]
    console.log(arr); // [3, 2, 1]
    // 改变原数组

    // 排序
    var arr = [1, 25, 13, 3336, 564];

    arr.sort();
    console.log(arr);
    arr.sort((a, b) => b - a);
    console.log(arr);
    console.clear();

    var arr = [1, 2, 35, 5];
    var mappedArr = arr.map((ele) => ele * 2);
    console.log(mappedArr); //[2, 4, 70, 10]
    console.log(arr); // [1, 2, 35, 5]\

    console.clear();

    var arr = [1, 2, 3, 6, 8];
    var res = arr.filter((item) => item > 3);
    console.log(res); //[6, 8]

    console.clear();

    var name = "923";
    var employ = {
      name: "ls",
      age: 12,
      sigIn: () => {
        console.log(this.name); //923
      },
      sigIn2() {
        console.log(this.name); //ls
      },
    };

    employ.sigIn(); //923
    employ.sigIn2(); //ls

    console.log(Object.keys(employ));
    // ["name", "age", "sigIn", "sigIn2"]

    for (key in employ) {
      console.log(key);
    }

    delete employ.age;
    console.log(employ);
    //{name: "ls", sigIn: ƒ, sigIn2: ƒ}

    console.clear();

    function Em(name, position) {
      this.name = name;
      this.position = position;
    }

    var emp1 = new Em("ls", "qd");
    console.log(emp1);

    console.clear();

    var emp = {
      firstname: "l",
      lastname: "s",
      get fullName() {
        return this.firstname + this.lastname;
      },
      set fullName(fullName) {
        let [f, l] = fullName.split(",");
        this.firstname = f;
        this.lastname = l;
      },
    };
    console.log(emp.fullName); //ls
    emp.fullName = "w,q";
    console.log(emp.fullName); //wq
    console.log(emp.firstname, emp.lastname); // w q

    function Emp2(name, position) {
      this.name = name;
      this.position = position;
    }
    var emp2 = new Emp2("ls", "hd");
    Object.defineProperty(emp2, "info", {
      get: function () {
        return this.name + " " + this.position;
      },
      set: function (info) {
        let [name, position] = info.split(" ");
        this.name = name;
        this.position = position;
      },
    });
    console.log(emp2.info); //ls hd
    emp2.info = "wq qd";
    console.log(emp2.name); // wq
    console.log(emp2.position); // qd

    console.clear();

    function Em(name, position) {
      this.name = name;
      this.position = position;
      this.sigIn = function () {
        console.log(this.name);
      };
    }

    var em1 = new Em("ls", "qd");
    var em2 = new Em("ss", "hd");

    console.log(em1); // Em {name: "ls", position: "qd", sigIn: ƒ}
    console.log(em2); // Em {name: "ss", position: "hd", sigIn: ƒ}

    console.log(Em.prototype);

    Em.prototype.age = 20;
    console.log(em1.age); // 20
    console.log(em2.age); // 20

    Em.prototype.printInfo = function () {
      console.log(this.name, this.age, this.position);
    };
    em1.printInfo(); // ls 20 qd
    em2.printInfo(); // ss 20 hd

    console.log(em1.__proto__); // {age: 20, printInfo: ƒ, constructor: ƒ}
    console.log(Em.prototype); // {age: 20, printInfo: ƒ, constructor: ƒ}
    console.log(em1.__proto__ === Em.prototype); //true
    console.log(Object.getPrototypeOf(em2)); // {age: 20, printInfo: ƒ, constructor: ƒ}
    console.clear();

    console.log(em1);
    for (key in em1) {
      console.log(key);
    }
    // name position sigIn printInfo
    var mag = Object.create(em1);
    console.log(mag); // Em{}
    for (key in mag) {
      console.log(key);
    }
    // name position sigIn printInfo

    console.log(mag.name); //ls
    mag.name = "ww";
    mag.position = "xs";
    console.log(mag); // {name: "ww", position: "xs"}
    mag.sigIn(); //ww this->mag
    console.log(Object.getOwnPropertyNames(mag)); //  ["name", "position"]
    console.clear();

    var protoOfMag = Object.getPrototypeOf(mag);
    console.log(protoOfMag); // Em {name: "ls", position: "qd", sigIn: ƒ}  => em1
    var protoOfEm = Object.getPrototypeOf(protoOfMag);
    console.log(protoOfEm); // {age: 20, printInfo: ƒ, constructor: ƒ} =>em1 构造函数的prototype
    var protoOfEmp = Object.getPrototypeOf(protoOfEm);
    console.log(protoOfEmp); // Object 构造函数
    var protoOfObj = Object.getPrototypeOf(protoOfEmp);
    console.log(protoOfObj); // null
    console.clear();

    function Mag2() {}
    Mag2.prototype.department = "jsb";
    Object.setPrototypeOf(mag, Mag2.prototype);
    console.log(mag.department); //jsb
    console.log(Object.getPrototypeOf(mag)); //{department: "jsb", constructor: ƒ}
    // console.log(mag.sigIn()); //报错
    for (key in mag) {
      console.log(key);
    }
    // name , position (非继承属性，是本身就定义的),department
    console.clear();

    var post = {
      id: 1,
      title: "title1",
      content: "content1",
    };
    console.log(post); // {id: 1, title: "title1", content: "content1"}
    var postClone = {
      ...post,
    };
    console.log(postClone); // {id: 1, title: "title1", content: "content1"}
    console.log(post === postClone); // false

    var post2 = {
      ...post,
      author: "ls",
    };
    console.log(post2); // {id: 1, title: "title1", content: "content1", author: "ls"}

    var arr = [1, 2, 3];
    var arrClone = [...arr];
    console.log(arrClone); // [1, 2, 3]
    var arr2 = [...arr, 5, 6]; // [1, 2, 3, 5, 6]
    console.log(arr2);

    function savePoint(id, title, content) {
      console.log("SAVING..", id, title, content);
    }

    savePoint(...[2, "title2", "content2"]);
    // SAVING.. 2 title2 content2

    console.clear();

    var post = {
      id: 1,
      title: "t1",
      content: "c1",
    };
    var { id, title } = post;
    console.log(id, title); // 1 "t1"

    var { id, title: headline } = post;
    console.log(id, headline); // 1 "t1"

    var { id, title, comments = "no comments" } = post;
    console.log(comments); // no comments

    var [a, b = 2] = [1];
    console.log(a, b); // 1 2

    var post2 = {
      id: 2,
      title: "t2",
      content: "c2",
      comments: [
        {
          userId: 1,
          comment: "cm1",
        },
        {
          userId: 2,
          comment: "cm2",
        },
        {
          userId: 3,
          comment: "cm3",
        },
      ],
    };
    var {
      comments: [, { comment }],
    } = post2;
    console.log(comment); // cm2

    function getID(idKey, obj) {
      let { [idKey]: id } = obj;
      return id;
    }
    console.log(
      getID("userId", {
        userId: 3,
      })
    ); // 3

    var { comments, ...rest } = post2;
    console.log(rest); // {id: 2, title: "t2", content: "c2"}
    function savePostObj({ id, title, content, ...rest }) {
      console.log(id, title, content); // 4 "t34" "cc2"

      console.log(rest); //{author: "ls923"}
    }
    savePostObj({ id: 4, title: "t34", content: "cc2", author: "ls923" });

    console.clear();

    // 数组
    function byReference(arr) {
      arr[0] = 5;
    }
    var array = [1, 2, 3];
    byReference(array);
    console.log(array); // [5,2,3]

    // 对象
    function byReferenceObj(obj) {
      obj.title = "t1";
    }
    var post = { id: 1, title: "t33" };
    byReferenceObj(post);
    console.log(post); // {id: 1, title: "t1"}

    // 字符串
    function byReferenceStr(str) {
      str = "abc";
    }
    var testStr = "test";
    byReferenceStr(testStr);
    console.log(testStr); // test

    // number
    function byValue(num) {
      num = 10;
      console.log(num);
    }
    var testNum = 1;
    byValue(testNum);
    console.log(testNum);

    console.clear();

    // call ,apply ,bind 补充
    var emp = {
      id: 1,
      name: "ls",
      //   printInfo() {
      //     console.log("Name:" + this.name);
      //   },
      //   department: {
      //     name: "jsb",
      //     printInfo() {
      //       console.log("Part Name:" + this.name);
      //     },
      //   },
    };
    // emp.printInfo(); // Name:ls
    // emp.department.printInfo(); // Part Name:jsb

    function printInfo(dep1, dep2, dep3) {
      console.log("员工姓名:" + this.name, dep1, dep2, dep3);
    }
    printInfo.call(emp, "a", "b", "c"); // 员工姓名:ls a b c
    printInfo.apply(emp, ["d", "e", "f"]); // 员工姓名:ls d e f
    printInfo.bind(emp, "g", "h", "i")(); // 员工姓名:ls g h i
    console.clear();

    // RegExp
    var str = "where when what";
    var re = /wh/g;
    var re2 = new RegExp("wh");
    console.log(re.exec(str));
    console.log(re.exec(str));
    console.log(re.exec(str)); //["wh", index: 0, input: "where is when and what", groups: undefined]
    console.log(re.test(str)); //true
  </script>
</html>
